<template>
  <div v-loading="loading" :class="treeStore.isShowStrategyDetail ? 'not-click' : ''">
    <div v-if="treeStore.osType == 'win'" class="setting-box portSet p-2.5">
      <div class="topband">防火墙设置</div>
      <div class="titleMargin">
        <div class="leftCont">防火墙状态</div>
        <div class="leftCont">
          <el-switch
            v-model="data.fwState"
            :active-value="1"
            :inactive-value="0"
            @click="setFirewallStatus"
            style="margin-right: 10px"
          >
          </el-switch>
          <el-tooltip effect="dark" content="开启或关闭防火墙" placement="right">
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div v-else-if="treeStore.osType == 'linux'" class="setting-box portSet p-2.5">
      <div class="topband">网络防护</div>
      <div class="titleMargin">
        <div class="leftCont">防护状态</div>
        <div class="leftCont">
          <el-switch
            v-model="data.fwState"
            :active-value="1"
            :inactive-value="0"
            @click="setFirewallStatus"
            style="margin-right: 10px"
          >
          </el-switch>
          <el-tooltip
            effect="dark"
            content="注：开启之后，在保护模式下将阻断网络访问"
            placement="right"
          >
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useTreeStore } from "~/utils/pinia/tree.js";
import {
  req_getFirewallStatus,
  req_setFirewallStatus,
  req_getFirewallStatusLinux,
  req_setFirewallStatusLinux,
} from "~/utils/axios/index.js";
import { ElMessage } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";
import { _debounce } from "~/utils/common/function.js";
import { eventBus } from "~/utils/common/eventBus.js";
eventBus.on("getStrategyDetail", (detail) => {
  if (detail.fromOs === 'win') {
    data.fwState = detail.data.enable;
  } else {
    data.fwState = Number(detail.data[0].network_def) || 0;
  }
  // data.fwState = detail.data.enable || Number(detail.data[0].network_def) || 0;
});
const treeStore = useTreeStore();
const loading = ref(false);
const data = reactive({
  fwState: 0,
});
onMounted(() => {
  getFirewallStatus();
});
watch(
  () => treeStore.treeDeviceId,
  () => {
    getFirewallStatus();
  }
);
const getFirewallStatus = () => {
  if (!treeStore.treeDeviceId) return;
  loading.value = true;
  let promise;
  data.fwState = 0;
  if (treeStore.osType == "win") {
    promise = req_getFirewallStatus(treeStore.treeDeviceId);
    promise
        .then((res) => {
          loading.value = false;
          data.fwState = res.data.enable || Number(res.data[0].network_def) || 0;
        })
        .catch((err) => {
          loading.value = false;
        });
  } else {
    promise = req_getFirewallStatusLinux(treeStore.treeDeviceId, ["network_def"]);
    promise
        .then((res) => {
          console.log(res)
          loading.value = false;
          data.fwState = Number(res.data.data[0].network_def) || 0;
        })
        .catch((err) => {
          loading.value = false;
        });
  }
};
const setFirewallStatus = _debounce(() => {
  if (!treeStore.treeDeviceId) return;
  let promise;
  if (treeStore.osType == "win") {
    promise = req_setFirewallStatus(treeStore.treeDeviceId, { enable: data.fwState });
  } else {
    let params = [
      {
        key: "network_def",
        value: String(data.fwState),
      },
    ];
    promise = req_setFirewallStatusLinux(treeStore.treeDeviceId, params);
  }
  promise.then((res) => {
    res.data.succeed ? ElMessage.success("设置成功") : ElMessage.error("设置失败");
    getFirewallStatus();
  });
}, 500);
</script>

<style lang="scss" scoped>
.portSet {
  background-color: #fff;
  padding-bottom: 20px;
  margin-top: -16px;
}

.titleMargin,
.leftCont {
  display: flex;
  align-items: center;
}
.titleMargin {
  padding: 0 0 0 65px;
}
.leftCont {
  margin-right: 20px;
  font-size: 16px;
}
</style>
